<template>
  <div class="home">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="api.js" name="1">
        <el-input type="textarea" v-model="code" rows="20"></el-input>
      </el-collapse-item>
      <el-collapse-item title="生成searchForm" name="2">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="20">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="接口">
                    <el-select filterable v-model="form.apiName" placeholder="请选择接口">
                      <el-option label="请选择" value=""></el-option>
                      <el-option v-for="item in apisList" :label="`${item.name}-${item.remark}`" :key="item.name" :value="item.url"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="去掉分页">
                    <el-radio-group v-model="form.RemovePagination">
                      <el-radio label="是" :value="1"></el-radio>
                      <el-radio label="否" :value="0"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">生成</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-input type="textarea" v-model="code1" rows="20"></el-input>
      </el-collapse-item>
      <el-collapse-item title="根据返回生成表格" name="3">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="20">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="接口">
                    <el-select filterable v-model="form.apiName" placeholder="请选择接口">
                      <el-option label="请选择" value=""></el-option>
                      <el-option v-for="item in apisList" :label="`${item.name}-${item.remark}`" :key="item.name" :value="item.url"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="生成格式">
                    <el-radio-group v-model="form.tableFormat">
                      <el-radio label="html" :value="1"></el-radio>
                      <el-radio label="变量" :value="0"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="onSubmit1">生成</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-input type="textarea" v-model="code2" rows="20"></el-input>
      </el-collapse-item>
      <el-collapse-item title="生成输入框" name="4">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="20">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="接口">
                    <el-select filterable v-model="form.apiName" placeholder="请选择接口">
                      <el-option label="请选择" value=""></el-option>
                      <el-option v-for="item in apisList" :label="`${item.name}-${item.remark}`" :key="item.name" :value="item.url"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="去掉分页">
                    <el-radio-group v-model="form.RemovePagination">
                      <el-radio label="是" :value="1"></el-radio>
                      <el-radio label="否" :value="0"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">生成</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-input type="textarea" v-model="code3" rows="20"></el-input>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home',
  computed: {
    /**
     * @function 生成api.js的代码
     */
    code () {
      let text = `
      {
        `
      this.apisList.forEach((element, index) => {
        text = text + `${element.name}: '${element.url}', // ${element.remark}
        `
        if (index === this.apisList.length - 1){
          text = text + ``
        }
      })
      text = text + `}`
      return text
    },
    /**
     * @function 生成searchForm的代码
     */
    code1 () {
      let text = `
      {
        `
      for(let i in this.searchFormList){
        if (this.form.RemovePagination === '是') {
          if (i.toString() === 'pageSize' || i.toString === 'pageIndex'){
             continue
          }
        }
        text = text + `${i}: '', // ${this.searchFormList[i].description}
        `
      }
      text = text + `}`
      return text
    },
    /**
     * @function 生成表格
     */
    code2 () {
      if (this.form.tableFormat === '变量') {
        let text = `
        [`
        for(let i in this.tableFormatList){
          if (i.toString() === 'pageSize' || i.toString === 'pageIndex'){
              continue
          }
          text = text + `
          {
            prop: '${i}',
            label: '${this.tableFormatList[i].description}',
            hoverClass: 'el-icon-close',
            headerAlign: 'center',
            align: 'center',
            width: '180'
          },`
        }
        text = text + `
        ]`
        return text
      }
      else {
        let text = ``
        for(let i in this.tableFormatList){
          if (i.toString() === 'pageSize' || i.toString === 'pageIndex'){
              continue
          }
          text = text + `
          <el-table-column
            prop="${i}"
            label="${this.tableFormatList[i].description}"
            header-align="center"
            align="center"
            width="100">
          </el-table-column>`
        }
        return text
      }
    },
    /**
     * @function 生成输入框
     */
    code3 () {
      let text = ``
      for(let i in this.searchFormList){
        if (this.form.RemovePagination === '是') {
          if (i.toString() === 'pageSize' || i.toString === 'pageIndex'){
             continue
          }
        }
        text = text + `
        <el-col :span="6">
          <el-form-item label="${this.searchFormList[i].description}" label-width="120px" class="Form_item">
            <el-input v-model="searchForm.${i}" placeholder="请输入" size="mini" />
          </el-form-item>
        </el-col>`
      }
      return text
    }
  },
  data () {
    return {
      ip: 'http://192.168.20.51:3000/',
      apisList: [],
      searchFormList: {},
      tableFormatList: {},
      activeName: '1',
      form: {
        apiName: '',
        RemovePagination: '是',
        tableFormat: '变量'
      }
    }
  },
  methods: {
    /**
     * @function 获取searForm数据
     */
    onSubmit () {
      this.axios.post(`${this.ip}api/searchform`,{ip: this.$route.query.ip, apiName: this.form.apiName}).then(res => {
        this.searchFormList = res.data.data.record
      })
    },
    /**
     * @function 获取表格数组
     */
    onSubmit1 () {
      this.axios.post(`${this.ip}api/table`,{ip: this.$route.query.ip, apiName: this.form.apiName}).then(res => {
        this.tableFormatList = res.data.data.record
      })
    }
  },
  mounted () {
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    if (this.$route.query.ip) {
      this.axios.post(this.ip, {ip: this.$route.query.ip}).then(res => {
        loading.close()
        this.axios.post(`${this.ip}apijs`, {ip: this.$route.query.ip}).then(res => {
          this.apisList = res.data.data.record
        })
      })
    } else {
      this.$route.push('/')
    }
  }
}
</script>
